<template>
	<view class="container">

		<view class="nav" @tap="toHome()">
			<image :src="$xyfun.image('/static/arrow-left.png')"></image>
		</view>

		<image :src="$xyfun.image(selectedImageSrc)" class="lightbulb-icon"></image>

		<view class="buttons">
			<view v-for="(light, index) in lights" :key="index" class="light-button" :class="{ 'selected': light.isOn }"
				@click="toggleLight(index)">

				<image :src="$xyfun.image(light.image)" class="light-image"></image>
				<text>{{ light.number }}号灯</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				lights: [{
						number: 1,
						isOn: false,
						imageOn: '/static/store/on/1.png',
						imageOff: '/static/store/off/1.png',
						image: '/static/store/off/1.png'
					},
					{
						number: 2,
						isOn: false,
						imageOn: '/static/store/on/2.png',
						imageOff: '/static/store/off/2.png',
						image: '/static/store/off/2.png'
					},
					{
						number: 3,
						isOn: false,
						imageOn: '/static/store/on/3.png',
						imageOff: '/static/store/off/3.png',
						image: '/static/store/off/3.png'
					},
					{
						number: 4,
						isOn: false,
						imageOn: '/static/store/on/4.png',
						imageOff: '/static/store/off/4.png',
						image: '/static/store/off/4.png'
					},
					{
						number: 5,
						isOn: false,
						imageOn: '/static/store/on/5.png',
						imageOff: '/static/store/off/5.png',
						image: '/static/store/off/5.png'
					},
					{
						number: 6,
						isOn: false,
						imageOn: '/static/store/on/6.png',
						imageOff: '/static/store/off/6.png',
						image: '/static/store/off/6.png'
					},
					{
						number: 7,
						isOn: false,
						imageOn: '/static/store/on/7.png',
						imageOff: '/static/store/off/7.png',
						image: '/static/store/off/7.png'
					},
					{
						number: 8,
						isOn: false,
						imageOn: '/static/store/on/8.png',
						imageOff: '/static/store/off/8.png',
						image: '/static/store/off/8.png'
					},
					{
						number: 9,
						isOn: false,
						imageOn: '/static/store/on/9.png',
						imageOff: '/static/store/off/9.png',
						image: '/static/store/off/9.png'
					},
					{
						number: 10,
						isOn: false,
						imageOn: '/static/store/on/10.png',
						imageOff: '/static/store/off/10.png',
						image: '/static/store/off/10.png'
					}
				],
				selectedImageSrc: '/static/store/light-off.png' // Default to light-off
			};
		},
		methods: {
			toHome() {
				uni.switchTab({
					url: "/pages/index"
				});
			},
			toggleLight(index) {
				const light = this.lights[index];
				light.isOn = !light.isOn; // Toggle the light state
				light.image = light.isOn ? light.imageOn : light.imageOff; // Update the light's image

				// Update the top image based on any light's state
				this.selectedImageSrc = this.lights.some(l => l.isOn) ?
					'/static/store/light-on.png' :
					'/static/store/light-off.png';

				// Log the binary state
				const binaryState = this.generateBinaryState();
				console.log(`Current binary state: ${binaryState}`);

				// Log the selected light numbers
				const lightNumbers = this.generateLightNumbers();
				console.log(`Lights on: ${lightNumbers}`);

				this.setting(lightNumbers, binaryState);
			},
			setting(lightNumbers, binaryState) {
				this.$api.post({
					url: '/common/ctrlLight',
					loadingTip: '加载中...',
					data: {
						number: lightNumbers,
						machine_id: '4A13E4F97975',
						state: binaryState,//isOn ? 'on' : 'off' // 接口需要 'on' 或 'off'
					},
					success: res => {
						console.log(res);
						uni.showToast({
							title: '设置成功'
						});
					}
				});
			},
			generateBinaryState() {
				return this.lights.map(light => (light.isOn ? 1 : 0)).join('');
			},
			generateLightNumbers() {
				// 获取所有亮灯编号并返回字符串形式
				return this.lights
					.filter(light => light.isOn) // 筛选亮灯的灯
					.map(light => light.number) // 提取亮灯编号
					.join(','); // 拼接成逗号分隔字符串
			}
		}
	};
</script>

<style lang="scss" scoped>
	* {
		cursor: url('/static/store/white-circle-cursor.png'), auto;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #000;
		color: #fff;
		padding: 20px;
		height: 100vh;
		overflow: hidden;
	}

	.text-on {
		color: #4CAF50;
		/* 金色 */
	}


	.room-selector {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 80%;
		padding: 10px;
		background-color: #4CAF50;
		border-radius: 10px;
		margin-bottom: 40px;
		margin-top: 89rpx;
		text-align: center;
		position: relative;
	}

	.room-name {
		font-size: 18px;
		color: #fff;
		width: 100%;
		text-align: center;
	}

	.arrow-down {
		width: 48rpx;
		height: 31rpx;
		position: absolute;
		right: 109rpx;
	}

	.buttons {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		width: 100%;
		margin-top: 98rpx;
	}

	.light-button {
		width: 23%;
		margin-bottom: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		border: 2px solid transparent;
	}

	.light-button.selected {
		/* border-color: #FFD700; */
		/* Highlight border when the light is on */
	}

	.light-image {
		width: 115rpx;
		height: 115rpx;
		margin-bottom: 10px;
	}

	.lightbulb-icon {
		width: 240rpx;
		height: 348rpx;
	}

	.nav {
		position: absolute;
		top: 20px;
		left: 10px;

		image {
			width: 25px;
			height: 25px;
		}
	}
</style>
